import Base from "../base.js";
import theatersService from "../../service/theatersService.js";

export default class extends Base {

  constructor(props) {
    super(props);

  }
  render() {
    const template = `
          <table id="table" lay-filter="table"></table>
    `;
    this.$el.html(template);
  }
  async layui() {
    let data = await this.getTheaterList();
    data = data.filter(v=>v.cinemasId);
    this.table.render({
      elem: '#table'
      , page: true, //开启分页
      data: data
      , cols: [[ //表头
        { field: 'cinemasId', title: '影院', align: 'center',  fixed: 'left', templet: (data) => data.cinemasId.name }
        , { field: '_id', title: '影厅ID', align: 'center', }
        , { field: 'name', title: '影厅名', align: 'center', }
        , { field: 'status', title: '状态', align: 'center', templet: (data) => data.status?"营业":"未营业"}
        , { field: 'operation', title: '操作', align: 'center',  toolbar: '<div><a class="layui-btn layui-btn-xs updateTheaterBtn" lay-event="edit">更新</a><a class="layui-btn layui-btn-danger layui-btn-xs removeTheaterBtn" lay-event="del">删除</a></div>' }
      ]]
    });
  };
  async getTheaterList() { return await theatersService.getTheaterList(); };
  handle() {
    const that = this;
    this.table.on('tool(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      if (layEvent === 'detail') { //查看
        //do somehing
      } else if (layEvent === 'del') { //删除
        layer.confirm('真的删除影厅吗', function (index) {
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          that.removeTheater(data);
        });
      } else if (layEvent === 'edit') { //编辑
        //do something
        theatersService.setTheater(data)//把数据保存到本地
        location.hash=`#/info/updateTheater`//跳转到更新
        //同步更新缓存对应的值
      } 
    });
  }

  async removeTheater(data){
    await theatersService.removeTheater(data);//向服务端发送删除指令
    this.layui()

  }

  mounted() {
    this.getTheaterList()
  }
}